import { Card, CardHeader, CardContent, CardTitle } from "@/components/ui/card";
import { Order, OrderStatus } from "@/types/order";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Decimal } from "decimal.js";
import { formatDate } from "@/utils/dateformat";



type OrderCardProps = {
  order: Order;
  onPayment: (orderId: number) => Promise<void>;
  onCancel: (orderId: number) => Promise<void>;
  onReceived: (orderId: number) => Promise<void>;
};




const OrderCard = ({ order, onPayment, onCancel, onReceived }: OrderCardProps) => {


  // 映射订单状态
  const statusMap = (status: OrderStatus) => {
    switch (status) {
      case "pending":
        return { label: "待支付", color: "bg-yellow-500" };
      case "paid":
        return { label: "已支付", color: "bg-blue-500" };
      case "shipped":
        return { label: "已发货", color: "bg-indigo-500" };
      case "delivered":
        case "completed":
          return { label: "已完成", color: "bg-gray-500" };
          return { label: "已送达", color: "bg-green-500" };
      case "cancelled":
        return { label: "已取消", color: "bg-red-500" };
    }
  };


  // 订单状态标签
  const StatusBadge = ({ status }: { status: OrderStatus }) => {
    const { label, color } = statusMap(status);
    return (
      <Badge className={`${color} text-white`}>{label}</Badge>
    );
  };



  return (
    <Card className="mb-4 ">
      <CardHeader className="pb-2">
        <div className="flex justify-between items-center">
          <CardTitle className="text-lg">订单号: {order.id}</CardTitle>
          <StatusBadge status={order.status} />
        </div>
        <p className="text-sm text-muted-foreground">下单时间: {formatDate(order.createdAt)}</p>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {order.items.map(item => (
            <div key={item.skuId} className="flex justify-between">
              <div>
                <p className="font-medium">{item.name}</p>
                <p className="text-sm text-muted-foreground">
                  ¥{new Decimal(item.price).toFixed(2)} x {item.quantity}
                </p>
              </div>
              <p className="font-medium">¥{new Decimal(item.price).mul(item.quantity).toFixed(2)}</p>
            </div>
          ))}

          <div className="border-t pt-3 mt-3 flex justify-between items-center">
            <div>
              <p className="font-bold">总计: ¥{new Decimal(order.total).toFixed(2)}</p>
              <p className="text-sm text-muted-foreground">
                共{order.items.reduce((sum, item) => sum + item.quantity, 0)}件商品
              </p>
            </div>

            {order.status === "pending" && (
              <div>
                <Button onClick={() => onCancel(order.id)} variant="outline" className="mr-2">
                  取消订单
                </Button>
                <Button onClick={() => onPayment(order.id)}>去支付</Button>
              </div>
            )}

            {/* {order.status === "shipped" && (
              <Button variant="outline">查看物流</Button>
            )} */}

            {order.status === "delivered" && (
              <Button variant="outline" onClick={()=> onReceived(order.id)}>确认收货</Button>
            )}

            {/* {(order.status === "completed") && (
              <Button variant="outline">评价</Button>
            )} */}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};


export { OrderCard }